<template>
  <div>
    <div id="barchart" ></div>
  </div>
</template>

<script>
// echarts的二次的封装
  // 就是根据公司的设计需求，改了很多样式，符合公司的很多场景，方便服用样式，也设计了 x轴，y轴，数据轴，标题等父传子数据 来显示不同的数据等 ，一些基础封装

export default {
  name: 'Vuepro2209Bar',

  data() {
    return {
      
    };
  },
  props:{
    title:{ //图表标题
      type:String,
      required:true,
      default:"图表标题"
    },

    xArr:{ //x轴的数据
      type:Array,
      required:true,
      default(){
        return []
      }
    },
     serData:{//series的数据
      type:Array,
      required:true,
      default(){
        return []
      }
    }
  },
  watch:{
    serData:{ //发现传来的新的数据
        handler(){
          this.makeBar();//重新生成图表
        },
        deep:true
    }
  },
  created(){
    this.$nextTick(()=>{
       this.makeBar();
    })
  },
  mounted() {
   
  },

  methods: {
      makeBar(){
          // 初始化echarts实例
          let charts=this.$echarts.init(document.getElementById("barchart"))
          // 准备好配置项
          let  option = {
            title:{
              text:this.title
            },
            legend:{},
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
            grid: { //网格
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                data:this.xArr, //x轴数据
                axisTick: {
                  alignWithLabel: true
                }
              }
                ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [ //数据轴
              {
                name: '柱子',
                type: 'bar',
                barWidth: '60%',
                data:this.serData //数据轴数据
              }
            ]
};


          // 将配置项设置给实例
         
       charts.setOption(option)


      }
  },
};
</script>
<style lang="less">
  #barchart{
    width:600px;
    height:500px;
    background:skyblue;
  }
</style>